﻿<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <!-- 2 load the theme CSS file -->
  <link rel="stylesheet" href="lib/themes/default/style.min.css" />
</head>
<body>
  <!-- 3 setup a container element -->
  <div id="jstree" style="width:150px">    
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="lib/libs/jquery.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="lib/jstree.min.js"></script>
  <script>
      function NodeData(id, text, state,children) {
          this.id = id;
          this.text = text;
          this.state = state;
          this.children = children;          
      }

      var defaultState = {
          'opened': true
      }

      $(function () {
          // 6 create an instance when the DOM is ready
          var data = new Array();
          var chirldren = new Array();
          var root = new NodeData("Root", "Root", defaultState, chirldren);

          var hrChildren = new Array();
          var hrNode = new NodeData("Root$HR", "HR", defaultState, hrChildren);
          var itNode = new NodeData("Root$IT", "IT", defaultState, null);
          chirldren.push(hrNode);
          chirldren.push(itNode);

          var hr1 = new NodeData("Root$HR$HR1", "HR1", defaultState, null);
          hrChildren.push(hr1);
          data.push(root);

          $('#jstree').jstree({
              'plugins':["wholerow"],
              'core': {
                  'data': data
              }
          });

          // 7 bind to events triggered on the tree
          $('#jstree').on("changed.jstree", function (e, data) {
              console.log(data.selected);
          });
          // 8 interact with the tree - either way is OK
          $('button').on('click', function () {
              $('#jstree').jstree(true).select_node('child_node_1');
              $('#jstree').jstree('select_node', 'child_node_1');
              $.jstree.reference('#jstree').select_node('child_node_1');
          });
      });
  </script>
</body>
</html>